<template>
  <div>
    <Calendar
      :value="value"
      @next="next"
      @prev="prev"
      :events="events"
      :weekSwitch="weekSwitch"
      lunar="false"
      clean
      :range="range"
      @select="select"
      ref="calendar"
      @selectMonth="selectMonth"
      @selectYear="selectYear"
      :arrowLeft="arrowLeft"
      :tileContent="tileContent"
      :almanacs="almanacs"
    />
    <div id="head"></div>
    <scroll-view v-if="userData" scroll-y :style="{height:scrollHeight-100+'px'}">
      <div v-for="(item,index) in userData" :key="index" class="cardBar">
        <div
          v-if="userData[index].mode == 0"
          class="card"
          @click="goToChart"
          :id="userData[index].mode"
        >
          <div class="weui-flex flex">
            <div class="weui-flex__item item1">体重</div>
            <div class="weui-flex__item item2">
              <div class="num">{{userData[index].weight}}</div>
              <div class="com">Kg</div>
            </div>
          </div>
          <div class="time">
            <div class="timeNum">{{userData[index].time}}</div>
          </div>
        </div>
        <div
          v-if="userData[index].mode == 1"
          class="card"
          @click="goToChart"
          :id="userData[index].mode"
        >
          <div class="weui-flex flex">
            <div class="weui-flex__item item1">收缩压(DP)</div>
            <div class="weui-flex__item item2">
              <div class="num">{{userData[index].DP}}</div>
              <div class="com">mmHg</div>
            </div>
          </div>
          <div class="weui-flex flex">
            <div class="weui-flex__item item1">舒张压(SP)</div>
            <div class="weui-flex__item item2">
              <div class="num">{{userData[index].SP}}</div>
              <div class="com">mmHg</div>
            </div>
          </div>
          <div class="weui-flex flex">
            <div class="weui-flex__item item1">脉搏</div>
            <div class="weui-flex__item item2">
              <div class="num">{{userData[index].Pulse}}</div>
              <div class="com">bpm</div>
            </div>
          </div>
          <div class="time">
            <div class="timeNum">{{userData[index].time}}</div>
          </div>
        </div>
      </div>
    </scroll-view>
    <img v-if="showAddDate" src="/images/addBtn.svg" @click="addDate" class="addBtn">
    <img v-if="!showAddDate" src="/images/todayBtn.svg" @click="setToday" class="addBtn">
    <!-- <button @click="setToday" >返回今日</button>
    <button @click="dateInfo">日期信息</button>
    <button @click="renderer">重新渲染年月日期</button> -->
    <!-- <button @click="setRange" class="addBtn">多选模式</button> -->
  </div>
</template>

<script>
import Calendar from "mpvue-calendar";
import "mpvue-calendar/src/style.css";
const db = wx.cloud.database();
const _ = db.command;

export default {
  data() {
    return {
      scrollHeight: 0,
      userData: [],
      showAddDate: true,
      todayData: [],
      //日历日期
      calendarData: [2019, 1, 1],
      //日历日期2
      calendarData2: [],
      range: false,
      weekSwitch: true,
      disabledArray: ["2019-2-27", "2019-3-2"],
      begin: [2019, 1, 1],
      end: [2022, 12, 31],
      // tileContent: [
      //     {date: '2019-3-2', className: 'holiday ', content: '休'},
      //     {date: '2018-9-23', className: 'holiday ', content: '休'}
      // ]
    };
  },

  components: {
    Calendar
  },
  computed: {
    showBtn() {
      var dateMin = new Date(this.calendarData + " " + 0 + ":" + 0 + ":" + 0);
      var dateMax = new Date(
        this.calendarData2 + " " + 23 + ":" + 59 + ":" + 59
      );
      //获取所选日期数据
      this.getData(dateMin, dateMax);
      //是否今日，打开上传数据按钮
      if (this.calendarData == this.todayData) {
        this.showAddDate = true;
      } else {
        this.showAddDate = false;
      }
    }
  },
  methods: {
    prev(year, month, weekIndex) {
      console.log(year, month, weekIndex);
    },
    next(year, month, weekIndex) {
      console.log(year, month, weekIndex);
    },
    selectYear(year) {
      console.log(year);
    },
    selectMonth(month, year) {
      console.log(year, month);
    },
    setToday() {
      this.$refs.calendar.setToday();
      console.log()
    },
    dateInfo() {
      const info = this.$refs.calendar.dateInfo(2018, 8, 23);
      console.log(info);
    },
    renderer() {
      this.$refs.calendar.renderer(2018, 8); //渲染2018年8月份
    },
    select(val, val2) {
      console.log(val);
      console.log(val2);
      this.calendarData = val[0] + "/" + val[1] + "/" + val[2];
      if (val2.date) {
        this.calendarData2 = val[0] + "/" + val[1] + "/" + val[2];
      } else {
        this.calendarData2 = val2[0] + "/" + val2[1] + "/" + val2[2];
      }
    },
    setRange() {
      this.range = !this.range;
    },
    addDate() {
      wx.navigateTo({
        url: "/pages/addDate/main"
      });
    },
    getData(dateMin, dateMax) {
      db
        .collection("userData")
        .orderBy("mode", "asc")
        .orderBy("time", "asc")
        .where({
          date: _.lte(dateMax).and(_.gte(dateMin)),
          _openid: wx.getStorageSync('openid')
        })
        .get({
          success: res => {
            let userData = res.data;
            for (var i = 0; i < userData.length; i++) {
              var M = userData[i].time.getMonth() + 1 + "/";
              var D = userData[i].time.getDate() + " ";
              var h = userData[i].time.getHours() + ":";
              var m = userData[i].time.getMinutes();
              var s = userData[i].time.getSeconds();
              userData[i].time = M + D + h + m;
            }
            // res.data 是包含以上定义的两条记录的数组
            this.userData = res.data;
          }
        });
    },
    goToChart(e) {
      let url = `/pages/chart/main?mode=${e.currentTarget.id}&todayData=${
        this.todayData
      }`;
      wx.navigateTo({ url });
    }
  },

  created() {},
  onLoad() {
    // 获取今日日期
    var time = new Date();
    var y = time.getFullYear();
    var m = time.getMonth() + 1;
    var d = time.getDate();
    let date = y + "/" + m + "/" + d;
    this.todayData = y + "/" + m + "/" + d;
    //初始化今日日期
    this.calendarData = date;
    this.calendarData2 = date;

    //获取openid
    wx.cloud.callFunction({
      name: "login",
      complete: res => {
        wx.setStorageSync('openid', res.result.openid)
      }
    });

    const query = wx.createSelectorQuery();
    query.select("#head").boundingClientRect();
    query.exec(res => {
      var top = res[0].bottom;
      wx.getSystemInfo({
        success: res => {
          var windowHeight = res.windowHeight;
          this.scrollHeight = windowHeight - top + res.statusBarHeight;
        }
      });
    });
  }
};
</script>

<style lang="less">
.addBtn {
  // background-image: url(https://7465-test-c5f4e9-1258730068.tcb.qcloud.la/icon/addBtn.svg);
  height: 70rpx;
  width: 70rpx;
  background-size: 70rpx;
  background-repeat: no-repeat;
  margin: 0 auto;
  background-color: #ffffff;
  position: absolute;
  bottom: 100rpx;
  right: 50rpx;
}
.addBtn::after {
  border: 0;
}
.cardBar {
  .card {
    margin: 20rpx;
    padding: 20rpx;
    background-color: #7acfdf;
    border-radius: 10rpx;
    .flex {
      .item1 {
        font-size: 40rpx;
        color: #ffffff;
        line-height: 70rpx;
      }
      .item2 {
        text-align: right;
        line-height: 70rpx;
        .num {
          display: inline-block;
          font-size: 70rpx;
          //font-weight: 500;
          color: #ffffff;
        }
        .com {
          display: inline-block;
          font-size: 30rpx;
          //font-weight: 500;
          color: #ffffff;
        }
      }
    }
    .time {
      .timeNum {
        text-align: left;
        font-size: 30rpx;
        color: #ffffff;
      }
    }
  }
}
</style>
